<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">资源列表
        </div>
        <div class="layui-card-body">
          <div class="layui-card-header">
            <!-- <span>所有会员列表</span> -->
            <a href="#/res/input" class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe654;</i>
              <span>新增</span>
            </a>
          </div>
          <div class="layui-card-body">
            <table class="layui-table layui-form" id="tree-table"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.config({
    base: 'js/'
  }).use(['treeTable', 'layer', 'axios', 'mockjs', 'api'], function () {
    var treeTable = layui.treeTable,
      axios = layui.axios,
      api = layui.api,
      layer = layui.layer;

    // 这样写并不友好，有更好的方式
    axios.get(api.res.treedata, {
      headers: {
        'X-TOKEN': localStorage.getItem('X-TOKEN')
      }
    }).then(res => {
      var re = treeTable.render({
        elem: '#tree-table',
        data: res.data,
        icon_key: 'title',
        is_checkbox: true,
        checked: {
          key: 'id',
          data: []
        },
        // end: function(e){
        // 	form.render();
        // },
        cols: [{
            key: 'title',
            title: '名称',
            width: '100px'
          },
          {
            key: 'resCode',
            title: '权限代码',
            width: '100px',
            align: 'center',
          },
          {
            key: 'url',
            title: 'URL',
            width: '100px',
            align: 'center',
            template: function (item) {
              if (item.url === null) {
                return '';
              }
              return item.url;
            }
          },
          {
            key: 'icon',
            title: '图标',
            width: '100px',
            align: 'center',
            template: function (item) {
              return '<i class="layui-icon">' + item.icon + '</i>';
            }
          },
          {
            key: 'id',
            title: '操作',
            align: 'center',
            template: function (item) {
              return '<a lay-filter="del">删除</a> | <a href="#/res/input?id=' + item.id + '">编辑</a>';
            }
          }
        ]
      });
      treeTable.openAll(re);
      treeTable.on('tree(del)', function (data) {
        console.log(JSON.stringify(data))
        layer.confirm('确定删除吗？', {
          btn: ['确定', '取消'] //按钮
        }, function () {
          if (data.item.is_end) {
            // 删除逻辑
            console.log(api.res.remote + "/" + data.item.id);
            axios.get(api.res.remote + "/" + data.item.id, {
              headers: {
                'X-TOKEN': localStorage.getItem('X-TOKEN')
              }
            }).then(res => {
              var data = res.data;
              if (data.success === true) {
                layer.msg(data.msg);
                axios.get(api.res.treedata, {
                  headers: {
                    'X-TOKEN': localStorage.getItem('X-TOKEN')
                  }
                }).then(res => {
                  re.data = res.data;
					        re = treeTable.render(re);
                });
              } else {
                layer.alert(data.msg);
              }
            })

          } else {
            layer.msg('当前节点非叶子节点，不允许删除', {
              icon: 2
            });
          }
        }, function () {
        });
        //layer.alert(JSON.stringify(data));
      })
    })
  });
</script>

<style scoped>

</style>